<template>
	<!-- 遮罩层 -->
	<view class="custom-popup-overlay" v-if="props.show" @click="handleClose">
		<view class="custom-popup-content" @click.stop>
			<!-- 背景图 -->
			<view class="dialog-bg-image"></view>

			<!-- 客服图标 -->
			<view class="service-icon">
				<view class="icon-circle">
					<uv-icon name="headset" size="40" color="#fff"></uv-icon>
				</view>
			</view>

			<!-- 标题 -->
			<view class="dialog-title">
				平台管家
			</view>

			<!-- 二维码区域 -->
			<view class="qr-code-section">
				<view class="qr-code-wrapper">
					<!-- 模拟二维码的色块 -->
					<view class="qr-grid">
						<view
							v-for="(row, rowIndex) in qrCodeData"
							:key="rowIndex"
							class="qr-row"
						>
							<view
								v-for="(cell, cellIndex) in row"
								:key="cellIndex"
								class="qr-cell"
								:class="{ 'qr-cell-black': cell === 1 }"
							></view>
						</view>
					</view>
				</view>
			</view>

			<!-- 提示文字 -->
			<view class="instruction-text">
				<text class="scan-text">扫描上方二维码</text>
				<text class="add-text">添加平台管家微信</text>
			</view>

			<!-- 确认按钮 -->
			<view class="confirm-button" @click="handleConfirm">
				<text class="btn-text">我知道了</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, defineExpose} from 'vue'

// 定义props
const props = defineProps({
	show: {
		type: Boolean,
		default: false
	}
})

// 定义emits
const emit = defineEmits(['close', 'confirm'])

// 模拟二维码数据 (21x21的矩阵)
const qrCodeData = reactive([
	[1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1],
	[1,0,0,0,0,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,1],
	[1,0,1,1,1,0,1,0,1,1,0,1,0,0,1,0,1,1,1,0,1],
	[1,0,1,1,1,0,1,0,0,1,1,0,1,0,1,0,1,1,1,0,1],
	[1,0,1,1,1,0,1,0,1,0,0,1,0,0,1,0,1,1,1,0,1],
	[1,0,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0,0,0,1],
	[1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1],
	[0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0],
	[1,0,1,1,0,1,1,1,0,0,1,0,1,1,1,0,1,0,0,1,0],
	[0,0,0,0,1,0,0,1,1,0,0,1,0,0,1,1,0,1,1,0,1],
	[1,1,1,0,0,1,1,0,0,1,0,0,1,1,0,0,1,0,0,1,0],
	[0,0,0,1,1,0,0,1,1,0,1,1,0,0,1,1,0,1,1,0,1],
	[1,0,1,0,0,1,1,0,0,1,0,0,1,1,0,0,1,0,0,1,0],
	[0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0],
	[1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1],
	[1,0,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0,0,0,1],
	[1,0,1,1,1,0,1,0,1,0,0,1,0,0,1,0,1,1,1,0,1],
	[1,0,1,1,1,0,1,0,0,1,1,0,1,0,1,0,1,1,1,0,1],
	[1,0,1,1,1,0,1,0,1,0,0,1,0,0,1,0,1,1,1,0,1],
	[1,0,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,0,0,0,1],
	[1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1]
])

// 关闭弹框
const handleClose = () => {
	emit('close')
}

// 确认按钮点击
const handleConfirm = () => {
	emit('close')
	emit('confirm')
}

defineExpose({
	handleClose,
	handleConfirm
})
</script>

<style lang="scss" scoped>
// 自定义平台管家弹框样式
.custom-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-popup-content {
	width: 700rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/qrCodeBg.png') no-repeat center center;
	background-size: contain;
	z-index: 1;
	border-radius: 24rpx;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	box-sizing: border-box;
	animation: slideIn 0.3s ease;
}

.dialog-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/dialogBg.png') no-repeat center center;
	background-size: cover;
	border-radius: 16rpx;
	z-index: -1;
}

.dialog-title {
	margin-top: 60rpx;
	margin-bottom: 40rpx;
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	text-align: center;
}

.qr-code-section {
	margin-bottom: 40rpx;
}

.qr-code-wrapper {
	width: 300rpx;
	height: 300rpx;
	background: #fff;
	border: 2rpx solid #E5E5E5;
	border-radius: 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qr-grid {
	display: flex;
	flex-direction: column;
	gap: 2rpx;

	.qr-row {
		display: flex;
		gap: 2rpx;

		.qr-cell {
			width: 10rpx;
			height: 10rpx;
			background: #fff;
			border-radius: 1rpx;

			&.qr-cell-black {
				background: #000;
			}
		}
	}
}

.instruction-text {
	text-align: center;
	margin-bottom: 40rpx;
}

.scan-text {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
	font-weight: 500;
}

.add-text {
	display: block;
	font-size: 24rpx;
	color: #999;
}

.confirm-button {
	width: 100%;
	height: 88rpx;
	background: #FF6B35;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-text {
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
}

@keyframes slideIn {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(20rpx);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
</style>

<!--
使用示例：

<template>
	<view>
		<uv-button @click="showDialog = true">显示弹框</uv-button>
		
		<popup-dialog
			:show="showDialog"
			@close="showDialog = false"
			@confirm="handleConfirm"
		></popup-dialog>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(false)

const handleConfirm = () => {
	showDialog.value = false
	uni.showToast({
		title: '已确认',
		icon: 'success'
	})
}
</script>
-->